<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Wysiwyg Example</title>
		
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
		
		<!-- fonts -->
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
		
		
		<link rel="stylesheet" href="../assets/css/ace.min.css" />
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
		<![endif]-->
	</head>

	<body>
	 <div class="main-container">
	   <div class="page-content">
	 
		<div class="row">
			<div class="col-xs-12 col-sm-8 col-sm-offset-2">
				<h3 class="header blue lighter">
					Customizing wysiwyg buttons and submitting the form
				</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-8 col-sm-offset-2">
				
				<!-- the wysiwyg form -->
				<form method="POST" id="myform" action="wysiwyg.php">
					<div id="editor" class="wysiwyg-editor"></div>
					<input type="hidden" name="wysiwyg-value" />
					
					<div class="form-actions align-right clearfix">
						<button type="reset" class="pull-left btn">
							<i class="ace-icon fa fa-retweet bigger-110"></i>
							Reset
						</button>
						
						<button type="submit" class="btn btn-primary pull-right">
							<i class="ace-icon fa fa-check bigger-110"></i>
							Submit
						</button>
					</div>
				</form>
				
			</div>
		</div>
		
		
		<div id="modal-wysiwyg-editor" class="modal" tabindex="-1">
		 <div class="modal-dialog">
		  <div class="modal-content">

			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="blue bigger">Wysiwyg editor's HTML content</h4>
			</div>
			
			<div class="modal-body">
				<div class="row-fluid">
					 Content can be put inside a hidden input and sent to server
				</div>
				
				<div class="space-6"></div>
				
				<div class="row-fluid">
					<textarea spellcheck="false" id="wysiwyg-editor-value"></textarea>
				</div>
			</div>
			
			<div class="modal-footer">
				<button class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Cancel</button>
				<button class="btn btn-sm btn-primary"><i class="ace-icon fa fa-check"></i> OK</button>
			</div>

		  </div>
		 </div>
		</div>


	   </div>
	 </div>


		<!-- basic scripts -->
		<!--[if !IE]> -->
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		
		<script src="../assets/js/bootstrap.min.js"></script>
		
		<script src="../assets/js/bootstrap-wysiwyg.min.js"></script>
		
		<!-- ace scripts -->
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/ace-elements.min.js"></script>
		
		<script type="text/javascript">
			jQuery(function($) {
				$('#editor').ace_wysiwyg({
					toolbar:
					[
						{
							name:'font',
							title:'Custom tooltip',
							values:['Some Font!','Arial','Verdana','Comic Sans MS','Custom Font!']
						},
						null,
						{
							name:'fontSize',
							title:'Custom tooltip',
							values:{1 : 'Size#1 Text' , 2 : 'Size#1 Text' , 3 : 'Size#3 Text' , 4 : 'Size#4 Text' , 5 : 'Size#5 Text'} 
						},
						null,
						{name:'bold', title:'Custom tooltip'},
						{name:'italic', title:'Custom tooltip'},
						{name:'strikethrough', title:'Custom tooltip'},
						{name:'underline', title:'Custom tooltip'},
						null,
						'insertunorderedlist',
						'insertorderedlist',
						'outdent',
						'indent',
						null,
						{name:'justifyleft'},
						{name:'justifycenter'},
						{name:'justifyright'},
						{name:'justifyfull'},
						null,
						{
							name:'createLink',
							placeholder:'Custom PlaceHolder Text',
							button_class:'btn-purple',
							button_text:'Custom TEXT'
						},
						{name:'unlink'},
						null,
						{
							name:'insertImage',
							placeholder:'Custom PlaceHolder Text',
							button_class:'btn-inverse',
							//choose_file:false,//hide choose file button
							button_text:'Set choose_file:false to hide this',
							button_insert_class:'btn-pink',
							button_insert:'Insert Image'
						},
						null,
						{
							name:'foreColor',
							title:'Custom Colors',
							values:['red','green','blue','navy','orange'],
							/**
								You change colors as well
							*/
						},
						/**null,
						{
							name:'backColor'
						},*/
						null,
						{name:'undo'},
						{name:'redo'},
						null,
						'viewSource'
					],
					//speech_button:false,//hide speech button on chrome
					
					'wysiwyg': {
						hotKeys : {} //disable hotkeys
					}
					
				}).prev().addClass('wysiwyg-style2');

				
				
				//handle form onsubmit event to send the wysiwyg's content to server
				$('#myform').on('submit', function(){
					
					//put the editor's html content inside the hidden input to be sent to server
					//$('input[name=wysiwyg-value]' , this).val($('#editor').html());
					
					//but for now we will show it inside a modal box

					$('#modal-wysiwyg-editor').modal('show');
					$('#wysiwyg-editor-value').css({'width':'99%', 'height':'200px'}).val($('#editor').html());
					
					return false;
				});
				$('#myform').on('reset', function() {
					$('#editor').empty();
				});
				
				
			});
		</script>

	</body>
</html>
